<template>
	<view>
		<u-popup v-model="show" :mode="mode" :width="width" :height="height">
			<view class="body">
				<view class="icon">
					<u-icon :name="tipIcon.name" :color="tipIcon.color" :size="tipIcon.size"></u-icon>
				</view>
				<view class="title">{{title}}</view>
				<view class="desc">{{desc}}</view>
				<slot />
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		mode:{
			type: String,
			default: 'left'
		},
		width:{
			type: Number,
			default: 750
		},
		height:{
			type: Number,
			default: 200
		},
		tipIcon: {
			type: Object,
			default () {
				return {
					name: 'checkmark-circle-fill',
					color: '#19be6b',
					size: 140
				}
			}
		},
		title: {
			type: String,
			default: '提示消息'
		},
		desc:{
			type: String,
			default: ''
		}
	},
	watch:{
		show: function(val) {
			console.log(val)
		}
	}
}
</script>

<style lang="scss" scoped>
.body{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.icon{
		margin-top: 380rpx;
	}
	.title{
		margin-top: 35rpx;
		font-size: 38rpx;
		color: $u-main-color;
	}
	.desc{
		margin-top: 25rpx;
		font-size: 28rpx;
		margin-bottom: 200rpx;
		color: $u-tips-color;
	}
}
</style>
